<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Butterfly 安裝文檔(四) 主題配置-2 | HJ BLOG</title><meta name="keywords" content="hexo,butterfly,主題,doc,教程,文檔"><meta name="author" content="娄豪杰"><meta name="copyright" content="娄豪杰"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Butterfly安裝文檔-主題配置-2">
<meta property="og:type" content="article">
<meta property="og:title" content="Butterfly 安裝文檔(四) 主題配置-2">
<meta property="og:url" content="http://example.com/article/ceeb73f.html">
<meta property="og:site_name" content="HJ BLOG">
<meta property="og:description" content="Butterfly安裝文檔-主題配置-2">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-04-cover.png">
<meta property="article:published_time" content="2019-01-04T14:31:46.000Z">
<meta property="article:modified_time" content="2021-07-27T01:39:36.000Z">
<meta property="article:author" content="娄豪杰">
<meta property="article:tag" content="教程">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="主題">
<meta property="article:tag" content="butterfly">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-04-cover.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/article/ceeb73f"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Butterfly 安裝文檔(四) 主題配置-2',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-07-27 09:39:36'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css"><link rel="stylesheet" href="/css/custom.css"><meta name="generator" content="Hexo 5.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">70</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-book"></i><span> 阅读</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photo"><i class="fa-fw fas fa-image"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa-fw fas fa-heart card-announcement-animation"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-04-cover.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">HJ BLOG</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-book"></i><span> 阅读</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photo"><i class="fa-fw fas fa-image"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fa-fw fas fa-heart card-announcement-animation"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Butterfly 安裝文檔(四) 主題配置-2</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-01-04T14:31:46.000Z" title="发表于 2019-01-04 22:31:46">2019-01-04</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-07-27T01:39:36.000Z" title="更新于 2021-07-27 09:39:36">2021-07-27</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Docs%E6%96%87%E6%AA%94/">Docs文檔</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Butterfly 安裝文檔(四) 主題配置-2"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><div class="note blue icon flat"><i class="note-icon fas fa-bullhorn"></i><p>📖  本教程更新於 2021 年 07 月 20 日，教程的內容針對最新<strong>穩定版</strong>而更新（如果你是舊版，教程會有些出入，請留意）</p>
<p>🦋  Butterfly 已經更新到 <a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly/releases/tag/3.8.2">3.8.2</a></p>
</div>

<div class="note green icon flat"><i class="note-icon fas fa-rocket"></i><p> 📚  文檔目錄</p>
<p><a href="#">Post not found: Butterfly-安裝文檔-一-快速開始 🚀 快速開始</a> - <a href="#">Post not found: Butterfly-安裝文檔-二-主題頁面 📑 主題頁面</a> - <a href="#">Post not found: Butterfly-安裝文檔-三-主題配置-1 🛠 主題配置-1</a> - <a href="#">Post not found: Butterfly-安裝文檔-四-主題配置-2 ⚔️ 主題配置-2</a> - <a href="#">Post not found: Butterfly-安裝文檔-五-主題問答 ❓ 主題問答</a> - <a href="#">Post not found: Butterfly-安裝文檔-六-進階教程 ⚡️ 進階教程</a> - <a href="#">Post not found: Butterfly-安裝文檔-七-更新日誌 ✨ 更新日誌</a> - <a href="#">Post not found: Butterfly-打賞 🤞 打賞</a></p>
</div>

<div class="note orange icon flat"><i class="note-icon fas fa-magic"></i><p>你可以通過右下角的 <strong>簡</strong> 按鈕切換為簡體顯示 </p>
</div>

<hr>
<h2 id="評論"><a href="#評論" class="headerlink" title="評論"></a>評論</h2><div class="tabs" id="comments"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#comments-1">通用設置</button></li><li class="tab"><button type="button" data-href="#comments-2">Disqus</button></li><li class="tab"><button type="button" data-href="#comments-3">Disqusjs</button></li><li class="tab"><button type="button" data-href="#comments-4">livere（來必力）</button></li><li class="tab"><button type="button" data-href="#comments-5">Gitalk</button></li><li class="tab"><button type="button" data-href="#comments-6">Valine</button></li><li class="tab"><button type="button" data-href="#comments-7">Waline</button></li><li class="tab"><button type="button" data-href="#comments-8">Utterances</button></li><li class="tab"><button type="button" data-href="#comments-9">Facebook Comments</button></li><li class="tab"><button type="button" data-href="#comments-10">Twikoo</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="comments-1"><p>從3.0.0開始，開啟評論需要在<code>comments-use</code>中填寫你需要的評論。</p>
<p>支持雙評論顯示，只需要配置兩個評論（第一個為默認顯示）</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">comments:</span><br><span class="line">  # Up to two comments system, the first will be shown as default</span><br><span class="line">  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo</span><br><span class="line">  use:</span><br><span class="line"><span class="bullet">    -</span> Valine</span><br><span class="line">  text: true # Display the comment name next to the button</span><br><span class="line">  # lazyload: The comment system will be load when comment element enters the browser&#x27;s viewport.</span><br><span class="line">  # If you set it to true, the comment count will be invalid</span><br><span class="line">  lazyload: true</span><br><span class="line">  count: true # Display comment count in top<span class="emphasis">_img</span></span><br><span class="line"><span class="emphasis">  card_</span>post<span class="emphasis">_count: false # Display comment count in Home Page</span></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>use</td>
<td>使用的評論（請注意，填寫的評論首字母需要大寫。最多支持兩個，如果不需要請留空）<br><em>注意：雙評論不能是 Disqus 和 Disqusjs 一起，由於其共用同一個 ID，會出錯</em></td>
</tr>
<tr>
<td>text</td>
<td>是否顯示評論服務商的名字</td>
</tr>
<tr>
<td>lazyload</td>
<td>是否為評論開啟lazyload，開啟後，只有滾動到評論位置時才會加載評論所需要的資源（開啟lazyload後，評論數將不顯示）</td>
</tr>
<tr>
<td>count</td>
<td>是否在文章頂部顯示評論數 <br/> livere 和 utterances 不支持評論數顯示</td>
</tr>
<tr>
<td>card_post_count</td>
<td>是否在首頁文章卡片顯示評論數<br/>gitalk、livere 和 utterances 不支持評論數顯示</td>
</tr>
</tbody></table>
<blockquote>
<p>單評論</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-single-comments.png" alt="image-20200731172506907"></p>
<blockquote>
<p>雙評論</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-double-comments.png" alt="image-20200731173006128"></p>
<blockquote>
<p>顯示text</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-double-comments.png" alt="image-20200731173006128"></p>
<blockquote>
<p>不顯示text</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-double-comments-not-text.png" alt="image-20200731173143712"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-2"><p>註冊 <a target="_blank" rel="noopener" href="https://disqus.com/">disqus</a>，配置你自己的 disqus，然後在<code>Butterfly</code>裏開啟它。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">disqus:</span></span><br><span class="line">  <span class="attr">shortname:</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-disqus-new.png" alt="image-20201027211418161"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-3"><p>與Disqus一樣，但由於Disqus在中國大陸無法訪問， 使用Disqusjs可以在無法訪問Disqus時顯示評論。具體可參考<a target="_blank" rel="noopener" href="https://github.com/SukkaW/DisqusJS">Disqusjs</a>。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">disqusjs:</span><br><span class="line">  shortname:</span><br><span class="line">  siteName:</span><br><span class="line">  apikey:</span><br><span class="line">  api:</span><br><span class="line">  nocomment: # display when a blog post or an article has no comment attached</span><br><span class="line">  admin:</span><br><span class="line">  adminLabel:</span><br></pre></td></tr></table></figure>
<blockquote>
<p>當無法訪問 Disqus 時，會顯示</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-disqusjs-new.png" alt="image-20201027212543851"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-4"><p>註冊<a target="_blank" rel="noopener" href="https://livere.com/">來必力</a>，配置你自己的來必力設置，然後在<code>Butterfly</code>裏開啟它。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">livere:</span></span><br><span class="line">  <span class="attr">uid:</span></span><br></pre></td></tr></table></figure>
<p>laibili 的 uid 你能在這裏找到:</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-laibili.jpg"></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-laibili_2-new.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-5"><p>遵循 <a target="_blank" rel="noopener" href="https://github.com/gitalk/gitalk">gitalk</a>的指示去獲取你的 github Oauth 應用的 client id 和 secret 值。以及查看它的相關配置説明。</p>
<p>然後修改 <code>主題配置文件</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">gitalk:</span></span><br><span class="line">  <span class="attr">client_id:</span> <span class="string">你的client</span> <span class="string">id</span> </span><br><span class="line">  <span class="attr">client_secret:</span> <span class="string">你的client</span> <span class="string">secret</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">你的github倉庫</span></span><br><span class="line">  <span class="attr">owner:</span> <span class="string">你的github用户名</span></span><br><span class="line">  <span class="attr">admin:</span> <span class="string">該倉庫的擁有者或協作者</span></span><br><span class="line">  <span class="attr">language:</span> <span class="string">zh-CN</span> <span class="comment"># en, zh-CN, zh-TW, es-ES, fr, ru</span></span><br><span class="line">  <span class="attr">perPage:</span> <span class="number">10</span> <span class="comment"># Pagination size, with maximum 100.</span></span><br><span class="line">  <span class="attr">distractionFreeMode:</span> <span class="literal">false</span> <span class="comment"># Facebook-like distraction free mode.</span></span><br><span class="line">  <span class="attr">pagerDirection:</span> <span class="string">last</span> <span class="comment"># Comment sorting direction, available values are last and first.</span></span><br><span class="line">  <span class="attr">createIssueManually:</span> <span class="literal">false</span> <span class="comment"># Gitalk will create a corresponding github issue for your every single page automatically</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-gitalk-new.png" alt="image-20201027212704930"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-6"><p>遵循 <a target="_blank" rel="noopener" href="https://github.com/xCss/Valine">Valine</a>的指示去配置你的 LeanCloud 應用。以及查看相應的配置説明。</p>
<p>然後修改 <code>主題配置文件</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="attr">appId:</span>  <span class="comment"># leancloud application app id</span></span><br><span class="line">  <span class="attr">appKey:</span>  <span class="comment"># leancloud application app key</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span> <span class="comment"># comment list page size</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span> <span class="comment"># gravatar style https://valine.js.org/#/avatar</span></span><br><span class="line">  <span class="attr">lang:</span> <span class="string">en</span> <span class="comment"># i18n: zh-CN/zh-TW/en/ja</span></span><br><span class="line">  <span class="attr">placeholder:</span> <span class="string">記得留下你的暱稱和郵箱....可以快速收到回復</span> <span class="comment"># valine comment input placeholder(like: Please leave your footprints )</span></span><br><span class="line">  <span class="attr">guest_info:</span> <span class="string">nick,mail,link</span> <span class="comment">#valine comment header info (nick/mail/link)</span></span><br><span class="line">  <span class="attr">recordIP:</span> <span class="literal">false</span> <span class="comment"># Record reviewer IP</span></span><br><span class="line">  <span class="attr">serverURLs:</span> <span class="comment"># This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)</span></span><br><span class="line">  <span class="attr">bg:</span> <span class="string">/img/comment_bg.png</span> <span class="comment"># valine background</span></span><br><span class="line">  <span class="attr">emojiCDN:</span> <span class="comment"># emoji CDN</span></span><br><span class="line">  <span class="attr">enableQQ:</span> <span class="literal">false</span> <span class="comment"># enable the Nickname box to automatically get QQ Nickname and QQ Avatar</span></span><br><span class="line">  <span class="attr">requiredFields:</span> <span class="string">nick,mail</span> <span class="comment"># required fields (nick/mail)</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>
<p>Valine於 v1.4.5 開始支持自定義表情，如果你需要自行配置，請在<code>emojiCDN</code>配置表情CDN。</p>
<p>同時在Hexo 工作目錄下的<code>source/_data/</code>創建一個json文件<code>valine.json</code>,等同於Valine需要配置的<code>emojiMaps</code>，<code>valine.json</code>配置方式可參考如下</p>
<blockquote>
<p>valine.json</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#123; </span><br><span class="line"><span class="attr">&quot;tv_doge&quot;</span>: <span class="string">&quot;6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_親親&quot;</span>: <span class="string">&quot;a8111ad55953ef5e3be3327ef94eb4a39d535d06.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_偷笑&quot;</span>: <span class="string">&quot;bb690d4107620f1c15cff29509db529a73aee261.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_再見&quot;</span>: <span class="string">&quot;180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_冷漠&quot;</span>: <span class="string">&quot;b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_發怒&quot;</span>: <span class="string">&quot;34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_發財&quot;</span>: <span class="string">&quot;34db290afd2963723c6eb3c4560667db7253a21a.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_可愛&quot;</span>: <span class="string">&quot;9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_吐血&quot;</span>: <span class="string">&quot;09dd16a7aa59b77baa1155d47484409624470c77.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_呆&quot;</span>: <span class="string">&quot;fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_嘔吐&quot;</span>: <span class="string">&quot;9f996894a39e282ccf5e66856af49483f81870f3.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_困&quot;</span>: <span class="string">&quot;241ee304e44c0af029adceb294399391e4737ef2.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_壞笑&quot;</span>: <span class="string">&quot;1f0b87f731a671079842116e0991c91c2c88645a.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_大佬&quot;</span>: <span class="string">&quot;093c1e2c490161aca397afc45573c877cdead616.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_大哭&quot;</span>: <span class="string">&quot;23269aeb35f99daee28dda129676f6e9ea87934f.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_委屈&quot;</span>: <span class="string">&quot;d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_害羞&quot;</span>: <span class="string">&quot;a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_尷尬&quot;</span>: <span class="string">&quot;7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_微笑&quot;</span>: <span class="string">&quot;70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_思考&quot;</span>: <span class="string">&quot;90cf159733e558137ed20aa04d09964436f618a1.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_驚嚇&quot;</span>: <span class="string">&quot;0d15c7e2ee58e935adc6a7193ee042388adc22af.png&quot;</span></span><br><span class="line">&#125; </span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-valine.png"></p>
<blockquote>
<p>default_avatar</p>
</blockquote>
<table>
<thead>
<tr>
<th>參數</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空（默認）</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000"></td>
</tr>
<tr>
<td>mp</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp"></td>
</tr>
<tr>
<td>identicon</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon"></td>
</tr>
<tr>
<td>monsterid</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid"></td>
</tr>
<tr>
<td>wavatar</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=wavatar"></td>
</tr>
<tr>
<td>retro</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=retro"></td>
</tr>
<tr>
<td>robohash</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=robohash"></td>
</tr>
<tr>
<td>blank</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=blank&f=y"></td>
</tr>
<tr>
<td>404</td>
<td><img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"></td>
</tr>
</tbody></table><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-7"><p>Waline - 一款從 Valine 衍生的帶後端評論系統。可以將 Waline 等價成 With backend Valine。</p>
<p>具體配置可參考 <a target="_blank" rel="noopener" href="https://waline.js.org/">waline 文檔</a></p>
<p>然後修改 <code>主題配置文件</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># waline - A simple comment system with backend support fork from Valine</span></span><br><span class="line"><span class="comment"># https://waline.js.org/</span></span><br><span class="line"><span class="attr">waline:</span></span><br><span class="line">  <span class="attr">serverURL:</span>  <span class="comment"># Waline server address url</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">monsterid</span> <span class="comment"># gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image</span></span><br><span class="line">  <span class="attr">avatarCDN:</span> <span class="comment"># Gravatar CDN baseURL</span></span><br><span class="line">  <span class="attr">bg:</span> <span class="string">/img/comment_bg.png</span> <span class="comment"># waline background</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>
<p>由於 waline 將會逐步去掉 <code>emojiCDN</code> 和 <code>emojiMaps</code>, 舊的添加表情方法已被棄用（從 3.7.8 開始）</p>
<p>請參看 waline 的<a target="_blank" rel="noopener" href="https://waline.js.org/guide/client/emoji.html">添加表情文檔</a>進行配置</p>
<div class="hide-toggle" ><div class="hide-button toggle-title" style=""><i class="fas fa-caret-right fa-fw"></i><span>以下添加表情方法已被棄用</span></div>
    <div class="hide-content"><p>如果你需要自定義表情，請在<code>emojiCDN</code>配置表情CDN。</p>
<p>同時在Hexo 工作目錄下的<code>source/_data/</code>創建一個json文件<code>waline.json</code>,等同於Waline需要配置的<code>emojiMaps</code>，<code>waline.json</code>配置方式可參考如下</p>
<blockquote>
<p>waline.json</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#123; </span><br><span class="line"><span class="attr">&quot;tv_doge&quot;</span>: <span class="string">&quot;6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_親親&quot;</span>: <span class="string">&quot;a8111ad55953ef5e3be3327ef94eb4a39d535d06.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_偷笑&quot;</span>: <span class="string">&quot;bb690d4107620f1c15cff29509db529a73aee261.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_再見&quot;</span>: <span class="string">&quot;180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_冷漠&quot;</span>: <span class="string">&quot;b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_發怒&quot;</span>: <span class="string">&quot;34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_發財&quot;</span>: <span class="string">&quot;34db290afd2963723c6eb3c4560667db7253a21a.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_可愛&quot;</span>: <span class="string">&quot;9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_吐血&quot;</span>: <span class="string">&quot;09dd16a7aa59b77baa1155d47484409624470c77.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_呆&quot;</span>: <span class="string">&quot;fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_嘔吐&quot;</span>: <span class="string">&quot;9f996894a39e282ccf5e66856af49483f81870f3.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_困&quot;</span>: <span class="string">&quot;241ee304e44c0af029adceb294399391e4737ef2.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_壞笑&quot;</span>: <span class="string">&quot;1f0b87f731a671079842116e0991c91c2c88645a.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_大佬&quot;</span>: <span class="string">&quot;093c1e2c490161aca397afc45573c877cdead616.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_大哭&quot;</span>: <span class="string">&quot;23269aeb35f99daee28dda129676f6e9ea87934f.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_委屈&quot;</span>: <span class="string">&quot;d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_害羞&quot;</span>: <span class="string">&quot;a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_尷尬&quot;</span>: <span class="string">&quot;7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_微笑&quot;</span>: <span class="string">&quot;70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_思考&quot;</span>: <span class="string">&quot;90cf159733e558137ed20aa04d09964436f618a1.png&quot;</span>,</span><br><span class="line"><span class="attr">&quot;tv_驚嚇&quot;</span>: <span class="string">&quot;0d15c7e2ee58e935adc6a7193ee042388adc22af.png&quot;</span></span><br><span class="line">&#125; </span><br><span class="line"></span><br></pre></td></tr></table></figure></div></div>

<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-valine.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-8"><p>與Gitalk一樣，基於 GitHub issues 的評論工具。相對於Gitalk,其相對需要權限較少。具體配置可參考<a target="_blank" rel="noopener" href="https://utteranc.es/">Utterances</a>。</p>
<p>修改 <code>主題配置文件</code>:</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">utterances:</span><br><span class="line">  repo:</span><br><span class="line">  # 可選 pathname/url/title/og:title</span><br><span class="line">  issue<span class="emphasis">_term: pathname</span></span><br><span class="line"><span class="emphasis">  # 可選 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark</span></span><br><span class="line"><span class="emphasis">  light_</span>theme: github-light</span><br><span class="line">  dark<span class="emphasis">_theme: photon-dark</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-Utterances.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-9"><p><code>Facebook Comments</code>是Facebook提供的評論插件，需要登陸Facebook才可評論。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># Facebook Comments Plugin</span></span><br><span class="line"><span class="section"># https://developers.facebook.com/docs/plugins/comments/</span></span><br><span class="line">facebook<span class="emphasis">_comments:</span></span><br><span class="line"><span class="emphasis">  app_</span>id: </span><br><span class="line">  user<span class="emphasis">_id: # optional</span></span><br><span class="line"><span class="emphasis">  pageSize: 10 # The number of comments to show</span></span><br><span class="line"><span class="emphasis">  order_</span>by: social # social/time/reverse<span class="emphasis">_time</span></span><br><span class="line"><span class="emphasis">  lang: en_</span>US # Language en<span class="emphasis">_US/zh_</span>CN/zh<span class="emphasis">_TW and so on</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-butterfly-docs-facebook-comments.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="comments-10"><p><code>Twikoo</code> 是一個簡潔、安全、無後端的靜態網站評論系統，基於<a target="_blank" rel="noopener" href="https://curl.qcloud.com/KnnJtUom">騰訊雲開發</a>。</p>
<p>具體如何配置評論，請查看 <a target="_blank" rel="noopener" href="https://twikoo.js.org/quick-start.html#%E7%8E%AF%E5%A2%83%E5%88%9D%E5%A7%8B%E5%8C%96">Twikoo文檔</a></p>
<p>你只需要把獲取到的 <code>環境ID (envId)</code> 填寫到配置上去就行</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">twikoo:</span></span><br><span class="line">  <span class="attr">envId:</span></span><br><span class="line">  <span class="attr">region:</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">option:</span></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>參數</th>
<th>解釋</th>
</tr>
</thead>
<tbody><tr>
<td>envId</td>
<td>環境 ID</td>
</tr>
<tr>
<td>region</td>
<td>環境地域，默認為 ap-shanghai，如果您的環境地域不是上海，需傳此參數</td>
</tr>
<tr>
<td>visitor</td>
<td>是否顯示文章閲讀數</td>
</tr>
<tr>
<td>option</td>
<td>可選配置</td>
</tr>
</tbody></table>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-twikoo-comments.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="在綫聊天"><a href="#在綫聊天" class="headerlink" title="在綫聊天"></a>在綫聊天</h2><p>從3.0開始，Butterfly主題內置了多種在綫聊天工具。你可以選擇開啟一種，方便你與訪客的交流。</p>
<div class="tabs" id="online-chat"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#online-chat-1">通用設置</button></li><li class="tab"><button type="button" data-href="#online-chat-2">chatra</button></li><li class="tab"><button type="button" data-href="#online-chat-3">tidio</button></li><li class="tab"><button type="button" data-href="#online-chat-4">daovoice</button></li><li class="tab"><button type="button" data-href="#online-chat-5">Gitter</button></li><li class="tab"><button type="button" data-href="#online-chat-6">crisp</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="online-chat-1"><p>這些工具都提供了一個按鈕可以打開/關閉聊天窗口。<br>主題也提供了一個集合主題特色的按鈕來替換這些工具本身的按鈕，這個聊天按鈕將會出現在右下角裏。<br>你只需要把<code>chat_btn</code>打開就行。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Chat Button [recommend]</span></span><br><span class="line"><span class="comment"># It will create a button in the bottom right corner of website, and hide the origin button</span></span><br><span class="line"><span class="attr">chat_btn:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-button.png"></p>
<p>為了不影響訪客的體驗，主題提供一個<code>chat_hide_show</code>配置<br>設為<code>true</code>後，使用工具提供的按鈕時，只有向上滾動才會顯示聊天按鈕，向下滾動時會隱藏按鈕。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down</span></span><br><span class="line"><span class="attr">chat_hide_show:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<div class="note info flat"><p>如果使用工具自帶的聊天按鈕，按鈕位置可能會遮擋右下角圖標，請配置<code>rightside-bottom</code>調正右下角圖標位置</p>
</div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="online-chat-2"><p>配置chatra,需要知道<code>Public key</code></p>
<p>打開<a target="_blank" rel="noopener" href="https://chatra.com/">chatra</a>並註冊賬號。<br>你可以在<code>Preferences</code>中找到<code>Public key</code></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-id.png"></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># chatra</span></span><br><span class="line"><span class="comment"># https://chatra.io/</span></span><br><span class="line"><span class="attr">chatra:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>
<p><code>chatra</code>的樣式你可以<code>Chat Widget</code>自行配置</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-ui-settings.png"></p>
<blockquote>
<p>Demo</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-chatra-ui-demo.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="online-chat-3"><p>配置tidio,需要知道<code>Public key</code></p>
<p>打開<a target="_blank" rel="noopener" href="https://www.tidio.com/">tidio</a>並註冊賬號。<br>你可以在<code>Preferences &gt; Developer</code>中找到<code>Public key</code></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-id.png"></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># tidio</span></span><br><span class="line"><span class="comment"># https://www.tidio.com/</span></span><br><span class="line"><span class="attr">tidio:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">public_key:</span> <span class="string">XXXX</span></span><br></pre></td></tr></table></figure>
<p><code>tidio</code>的樣式你可以<code>Channels</code>自行配置</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-setting.png"></p>
<blockquote>
<p>Demo</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-tidio-demo.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="online-chat-4"><p>打開<a target="_blank" rel="noopener" href="http://daovoice.io/">daovoice</a>和註冊帳號<br>找到你的<code>app id</code></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-appid.png"></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># daovoice</span></span><br><span class="line"><span class="comment"># http://daovoice.io/</span></span><br><span class="line"><span class="attr">daovoice:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">app_id:</span> <span class="string">xxxxx</span></span><br></pre></td></tr></table></figure>
<p>可在<code>聊天設置</code>裏配置聊天按鈕等樣式</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-ui.png"></p>
<blockquote>
<p>Demo</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-daovoice-demo.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="online-chat-5"><p>打開<a target="_blank" rel="noopener" href="https://gitter.im/">Gitter</a>和註冊賬號<br>創建一個<code>community</code>或者<code>room</code>,複製名稱到設置去</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-gitter-setting.png"></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># gitter</span></span><br><span class="line"><span class="comment"># https://gitter.im/</span></span><br><span class="line"><span class="attr">gitter:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">room:</span> </span><br></pre></td></tr></table></figure>
<blockquote>
<p>Demo</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-chat-gitter-ui.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="online-chat-6"><p>打開<a target="_blank" rel="noopener" href="https://crisp.chat/en/">crisp</a>並註冊帳號</p>
<p>找到需要的網站ID</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># crisp</span></span><br><span class="line"><span class="comment"># https://crisp.chat/en/</span></span><br><span class="line"><span class="attr">crisp:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">website_id:</span> <span class="string">xxxxxxxx</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-buttefly-docs-chat-crisp.png" alt="image-20200731183023863"></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-crisp-demo.png" alt="image-20200731183444781"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="分享"><a href="#分享" class="headerlink" title="分享"></a>分享</h2><blockquote>
<p>只能選擇一個分享服務商</p>
</blockquote>
<div class="tabs" id="分享"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#分享-1">AddThis</button></li><li class="tab"><button type="button" data-href="#分享-2">Sharejs</button></li><li class="tab"><button type="button" data-href="#分享-3">Addtoany</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="分享-1"><blockquote>
<p>訪問 <a target="_blank" rel="noopener" href="https://www.addthis.com/">AddThis</a> 官網<br>找到你的 pub-id</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-addthis.jpg"></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">addThis:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span> <span class="comment"># or false</span></span><br><span class="line">  <span class="attr">pubid:</span> <span class="string">你的pub-id</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分享-2"><p>如果你不知道 <a target="_blank" rel="noopener" href="https://github.com/overtrue/share.js/">sharejs</a>，看看它的説明。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">sharejs:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">sites:</span> <span class="string">facebook,twitter,wechat,weibo,qq</span>  <span class="comment">#想要顯示的內容</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-sharejs.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分享-3"><p>可以到<a target="_blank" rel="noopener" href="https://www.addtoany.com/">addtoany</a>查看使用説明</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">addtoany:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">item:</span> <span class="string">facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-addtoany.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="搜索系統"><a href="#搜索系統" class="headerlink" title="搜索系統"></a>搜索系統</h2><div class="tabs" id="search"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#search-1"><i class="fab fa-algolia"></i>Algolia</button></li><li class="tab"><button type="button" data-href="#search-2"><i class="fas fa-search"></i>本地搜索</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="search-1"><blockquote>
<p>記得運行 hexo clean</p>
</blockquote>
<ol>
<li><p>你需要安裝 <a target="_blank" rel="noopener" href="https://github.com/oncletom/hexo-algolia">hexo-algolia</a>或 <a target="_blank" rel="noopener" href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>. 根據它們的説明文檔去做相應的配置。</p>
</li>
<li><p>修改 <code>主題配置文件</code></p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">algolia_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hits:</span></span><br><span class="line">    <span class="attr">per_page:</span> <span class="number">6</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="search-2"><blockquote>
<p>記得運行 hexo clean</p>
</blockquote>
<ol>
<li><p>你需要安裝 <a target="_blank" rel="noopener" href="https://github.com/PaicHyperionDev/hexo-generator-search">hexo-generator-search</a>. 根據它的文檔去做相應配置。<strong>注意格式只支持 xml</strong>。</p>
</li>
<li><p>修改 <code>主題配置文件</code></p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="網站驗證"><a href="#網站驗證" class="headerlink" title="網站驗證"></a>網站驗證</h2><p>如果需要搜索引擎收錄網站，可能需要登錄對應搜索引擎的管理平台進行提交。<br>各自的驗證碼可從各自管理平台拿到</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">site_verification:</span></span><br><span class="line">  <span class="comment"># - name: google_site_verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxx</span></span><br><span class="line">  <span class="comment"># - name: baidu_site_verification</span></span><br><span class="line">  <span class="comment">#   content: xxxxxxx</span></span><br></pre></td></tr></table></figure>
<h2 id="分析統計"><a href="#分析統計" class="headerlink" title="分析統計"></a>分析統計</h2><div class="tabs" id="分析統計"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#分析統計-1">百度統計</button></li><li class="tab"><button type="button" data-href="#分析統計-2">谷歌分析</button></li><li class="tab"><button type="button" data-href="#分析統計-3">騰訊分析</button></li><li class="tab"><button type="button" data-href="#分析統計-4">CNZZ分析</button></li><li class="tab"><button type="button" data-href="#分析統計-5">Cloudflare分析</button></li><li class="tab"><button type="button" data-href="#分析統計-6">Microsoft Clarity</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="分析統計-1"><ol>
<li><p>登錄百度統計的<a target="_blank" rel="noopener" href="https://tongji.baidu.com/web/welcome/login">官方網站</a></p>
</li>
<li><p>找到你百度統計的統計代碼</p>
</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-baidu-tongji.jpg"></p>
<ol start="3">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">baidu_analytics:</span> <span class="string">你的代碼</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分析統計-2"><ol>
<li><p>登錄谷歌分析的<a target="_blank" rel="noopener" href="https://www.google.com/analytics/">官方網站</a></p>
</li>
<li><p>找到你的谷歌分析的跟蹤 ID</p>
</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-google-analytics.jpg"></p>
<ol start="3">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_analytics:</span> <span class="string">你的代碼</span> <span class="comment"># 通常以`UA-`打頭</span></span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分析統計-3"><blockquote>
<p>由於騰訊分析將於20年12月關閉並遷移到騰訊移動分析,從 <code>3.1.0</code> 起，騰訊分析改為騰訊移動分析。</p>
</blockquote>
<ol>
<li>登錄騰訊移動分析的<a target="_blank" rel="noopener" href="https://mta.qq.com/">官方網站</a></li>
<li>選擇 <code>WEB應用</code></li>
<li>找到你的站點ID</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-tencent-analysic.png"></p>
<ol start="4">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Tencent_analytics ID</span></span><br><span class="line"><span class="attr">tencent_analytics:</span> </span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分析統計-4"><ol>
<li>登錄CNZZ分析的<a target="_blank" rel="noopener" href="https://www.umeng.com/">官方網站</a></li>
<li>找到 <code>站點設置 - 獲取代碼</code></li>
<li>找到你的 <code>web_id</code></li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-CNZZ-analysic.png"></p>
<ol start="4">
<li>修改 <code>主題配置文件</code></li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">cnzz_analytics:</span> </span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分析統計-5"><ol>
<li>登錄 Cloudflare 分析的<a target="_blank" rel="noopener" href="https://www.cloudflare.com/zh-tw/web-analytics/">官方網站</a></li>
<li>找到 <code>JavaScript 程式碼片段</code></li>
<li>找到你的 <code>token</code></li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-cloudflare-analytics-id.png" alt="image-20201230195158742"></p>
<ol start="4">
<li><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Cloudflare Analytics</span></span><br><span class="line"><span class="comment"># https://www.cloudflare.com/zh-tw/web-analytics/</span></span><br><span class="line"><span class="attr">cloudflare_analytics:</span></span><br></pre></td></tr></table></figure>
</li>
</ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="分析統計-6"><ol>
<li><p>登錄 Clarity 的<a target="_blank" rel="noopener" href="https://clarity.microsoft.com/">官方網站</a></p>
</li>
<li><p>創建 <code>PROJECT</code></p>
</li>
<li><p>找到你的 <code>ID</code><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-clarity-id.png" alt="image-20201230195541443"></p>
</li>
<li><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Microsoft Clarity</span></span><br><span class="line"><span class="comment"># https://clarity.microsoft.com/</span></span><br><span class="line"><span class="attr">microsoft_clarity:</span></span><br></pre></td></tr></table></figure>
</li>
</ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="廣告"><a href="#廣告" class="headerlink" title="廣告"></a>廣告</h2><div class="tabs" id="廣告"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#廣告-1">谷歌廣告</button></li><li class="tab"><button type="button" data-href="#廣告-2">手動廣告配置</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="廣告-1"><p>主題已集成谷歌廣告（自動廣告）</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">google_adsense:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_ads:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">js:</span> <span class="string">https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</span></span><br><span class="line">  <span class="attr">client:</span> <span class="comment"># 填入個人識別碼</span></span><br><span class="line">  <span class="attr">enable_page_level_ads:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-google-adsense1.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="廣告-2"><p>主題預留了三個位置可供插入廣告，分別為主頁文章(每三篇文章出現廣告)/aside公告之後/文章頁打賞之後。<br>把html代碼填寫到對應的位置</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">ad:</span></span><br><span class="line">  <span class="attr">index:</span></span><br><span class="line">  <span class="attr">aside:</span></span><br><span class="line">  <span class="attr">post:</span></span><br></pre></td></tr></table></figure>
<p>例如:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index:</span> <span class="string">&lt;ins</span> <span class="string">class=&quot;adsbygoogle&quot;</span> <span class="string">style=&quot;display:block&quot;</span> <span class="string">data-ad-format=&quot;fluid&quot;</span> <span class="string">data-ad-layout-key=&quot;xxxxxxxxxxxx&quot;</span> <span class="string">data-ad-client=&quot;ca-pub-xxxxxxxxxx&quot;</span> <span class="string">data-ad-slot=&quot;xxxxxxxxxx&quot;&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle=window.adsbygoogle||[]).push(&#123;&#125;)&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-ad-post.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-ad-index.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="Math-數學"><a href="#Math-數學" class="headerlink" title="Math 數學"></a>Math 數學</h2><div class="tabs" id="math"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#math-1">MathJax</button></li><li class="tab"><button type="button" data-href="#math-2">KaTeX</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="math-1"><blockquote>
<p>建議使用 KaTex 獲得更好的效果，下文有介紹！</p>
</blockquote>
<p>修改 <code>主題配置文件</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">mathjax:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true 表示每一頁都加載mathjax.js</span></span><br><span class="line">  <span class="comment"># false 需要時加載，須在使用的Markdown Front-matter 加上 mathjax: true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果<code>per_page</code>設為<code>true</code>,則每一頁都會加載Mathjax服務。設為<code>false</code>，則需要在文章<code>Front-matter</code>添加<code>mathjax: true</code>,對應的文章才會加載Mathjax服務。</p>
</blockquote>
<p>然後你需要修改一下默認的<code>markdown</code>渲染引擎來實現 MathJax 的效果。</p>
<p>查看: <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/hexo-renderer-kramed">hexo-renderer-kramed</a></p>
<p>以下操作在你 hexo 博客的目錄下 (<strong>不是 Butterfly 的目錄!</strong>):</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-mathjax.png"></p>
<p>效果：</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-mathjax-2.jpg"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="math-2"><p>首先禁用<code>MathJax</code>（如果你配置過 MathJax 的話），然後修改你的<code>主題配置文件</code>以便加載<code>katex.min.css</code>:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">katex:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># true 表示每一頁都加載katex.js</span></span><br><span class="line">  <span class="comment"># false 需要時加載，須在使用的Markdown Front-matter 加上 katex: true</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">hide_scrollbar:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>你不需要添加<code>katex.min.js</code>來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器，然後安裝其它插件。</p>
<div class="tabs" id="katex-plugins"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#katex-plugins-1">hexo-renderer-markdown-it 【建議】</button></li><li class="tab"><button type="button" data-href="#katex-plugins-2">hexo-renderer-markdown-it-plus</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="katex-plugins-1"><p>卸載掉 marked 插件，安裝 <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-renderer-markdown-it">hexo-renderer-markdown-it</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm un hexo-renderer-marked --save <span class="comment"># 如果有安裝這個的話，卸載</span></span><br><span class="line">npm un hexo-renderer-kramed --save <span class="comment"># 如果有安裝這個的話，卸載</span></span><br><span class="line"></span><br><span class="line">npm i hexo-renderer-markdown-it --save <span class="comment"># 需要安裝這個渲染插件</span></span><br><span class="line">npm install @neilsustc/markdown-it-katex --save <span class="comment">#需要安裝這個katex插件</span></span><br></pre></td></tr></table></figure>
<p>在 hexo 的根目錄的 <code>_config.yml</code> 中配置</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">plugin:</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">&#x27;@neilsustc/markdown-it-katex&#x27;</span></span><br><span class="line">      <span class="attr">options:</span></span><br><span class="line">        <span class="attr">strict:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p>如需配置其它參數，請參考 <a target="_blank" rel="noopener" href="https://katex.org/docs/options.html">katex 官網</a></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="katex-plugins-2"><blockquote>
<p>注意，此方法生成的 katex 沒有斜體</p>
</blockquote>
<p>卸載掉 marked 插件，然後安裝新的<code>hexo-renderer-markdown-it-plus</code>:</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器</span></span><br><span class="line"><span class="comment"># 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載</span></span><br><span class="line">npm un hexo-renderer-marked --save</span><br><span class="line"></span><br><span class="line"><span class="comment"># or</span></span><br><span class="line"></span><br><span class="line">npm un hexo-renderer-kramed --save</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># 然後安裝 `hexo-renderer-markdown-it-plus`</span></span><br><span class="line">npm i @upupming/hexo-renderer-markdown-it-plus --save</span><br></pre></td></tr></table></figure>
<p>注意到 <a target="_blank" rel="noopener" href="https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus"><code>hexo-renderer-markdown-it-plus</code></a>已經無人持續維護, 所以我們使用 <a target="_blank" rel="noopener" href="https://github.com/upupming/hexo-renderer-markdown-it-plus"><code>@upupming/hexo-renderer-markdown-it-plus</code></a>。 這份 fork 的代碼使用了 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>同時它也是 VSCode 的插件 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/vscode-markdown">Markdown All in One</a>所使用的, 所以我們可以獲得最新的 KaTex 功能例如 <code>\tag{}</code>。</p>
<p>你還可以通過 <a target="_blank" rel="noopener" href="https://github.com/yzhang-gh/markdown-it-katex"><code>@neilsustc/markdown-it-katex</code></a>控制 KaTeX 的設置，所有可配置的選項參見 <a target="_blank" rel="noopener" href="https://katex.org/docs/options.html%E3%80%82">https://katex.org/docs/options.html。</a> 比如你想要禁用掉 KaTeX 在命令行上輸出的宂長的警告信息，你可以在根目錄的 <code>_config.yml</code> 中使用下面的配置將 <code>strict</code> 設置為 false:</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">markdown_it_plus:</span></span><br><span class="line">  <span class="attr">plugins:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="attr">plugin:</span></span><br><span class="line">      <span class="attr">name:</span> <span class="string">&#x27;@neilsustc/markdown-it-katex&#x27;</span></span><br><span class="line">      <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">      <span class="attr">options:</span></span><br><span class="line">        <span class="attr">strict:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p>當然，你還可以利用這個特性來定義一些自己常用的 <code>macros</code>。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>



<p>因為 KaTeX 更快更輕量，因此沒有 MathJax 的功能多（比如右鍵菜單）。為那些使用 MathJax 的用户，主題也內置了 katex 的 <a target="_blank" rel="noopener" href="https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex">複製</a> 功能。</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-katex.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="美化-特效"><a href="#美化-特效" class="headerlink" title="美化/特效"></a>美化/特效</h2><h3 id="自定義主題色"><a href="#自定義主題色" class="headerlink" title="自定義主題色"></a>自定義主題色</h3><p>可以修改大部分UI顏色</p>
<p>修改 <code>主題配置文件</code>，比如：</p>
<blockquote>
<p>顏色值必須被雙引號包裹，就像<code>&quot;#000&quot;</code>而不是<code>#000</code>。否則將會在構建的時候報錯！</p>
</blockquote>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">theme_color:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">main:</span> <span class="string">&quot;#49B1F5&quot;</span></span><br><span class="line">  <span class="attr">paginator:</span> <span class="string">&quot;#00c4b6&quot;</span></span><br><span class="line">  <span class="attr">button_hover:</span> <span class="string">&quot;#FF7242&quot;</span></span><br><span class="line">  <span class="attr">text_selection:</span> <span class="string">&quot;#00c4b6&quot;</span></span><br><span class="line">  <span class="attr">link_color:</span> <span class="string">&quot;#99a9bf&quot;</span></span><br><span class="line">  <span class="attr">meta_color:</span> <span class="string">&quot;#858585&quot;</span></span><br><span class="line">  <span class="attr">hr_color:</span> <span class="string">&quot;#A4D8FA&quot;</span></span><br><span class="line">  <span class="attr">code_foreground:</span> <span class="string">&quot;#F47466&quot;</span></span><br><span class="line">  <span class="attr">code_background:</span> <span class="string">&quot;rgba(27, 31, 35, .05)&quot;</span></span><br><span class="line">  <span class="attr">toc_color:</span> <span class="string">&quot;#00c4b6&quot;</span></span><br><span class="line">  <span class="attr">blockquote_padding_color:</span> <span class="string">&quot;#49b1f5&quot;</span></span><br><span class="line">  <span class="attr">blockquote_background_color:</span> <span class="string">&quot;#49b1f5&quot;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-color_1.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-color_2.png"></p>
<h3 id="網站背景"><a href="#網站背景" class="headerlink" title="網站背景"></a>網站背景</h3><p>默認顯示白色，可設置圖片或者顏色</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 圖片格式 url(http://xxxxxx.com/xxx.jpg)</span></span><br><span class="line"><span class="comment"># 顏色（HEX值/RGB值/顔色單詞/漸變色)</span></span><br><span class="line"><span class="comment"># 留空 不顯示背景</span></span><br><span class="line"><span class="attr">background:</span></span><br></pre></td></tr></table></figure>
<p><em>留意:</em> 如果你的網站根目錄不是’/‘,使用本地圖片時，需加上你的根目錄。<br>例如：網站是 <code>https://yoursite.com/blog</code>,引用一張<code>img/xx.png</code>圖片，則設置background為 `url(/blog/img/xx.png)</p>
<blockquote>
<p>background:’#49B202’</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-set-body-background-color.png"></p>
<blockquote>
<p>background: url(<a target="_blank" rel="noopener" href="https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png">https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png</a>)</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-set-body-background-img.png"></p>
<h3 id="footer-背景"><a href="#footer-背景" class="headerlink" title="footer 背景"></a>footer 背景</h3><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># footer是否顯示圖片背景(與top_img一致)</span></span><br><span class="line"><span class="attr">footer_bg:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<table>
<thead>
<tr>
<th>配置的值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td>留空/false</td>
<td>顯示默認的顔色</td>
</tr>
<tr>
<td>img鏈接</td>
<td>圖片的鏈接，顯示所配置的圖片</td>
</tr>
<tr>
<td>顔色(<br>HEX值 - #0000FF<br>RGB值 - rgb(0,0,255)<br>顔色單詞 - orange<br>漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)<br>）</td>
<td>對應的顔色</td>
</tr>
<tr>
<td>true</td>
<td>顯示跟 top_img 一樣</td>
</tr>
</tbody></table>
<blockquote>
<p>true</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-footer-img.png"></p>
<h3 id="打字效果"><a href="#打字效果" class="headerlink" title="打字效果"></a>打字效果</h3><p>打字效果<a target="_blank" rel="noopener" href="https://github.com/disjukr/activate-power-mode">activate-power-mode</a></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Typewriter Effect (打字效果)</span></span><br><span class="line"><span class="comment"># https://github.com/disjukr/activate-power-mode</span></span><br><span class="line"><span class="attr">activate_power_mode:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">colorful:</span> <span class="literal">true</span> <span class="comment"># open particle animation (冒光特效)</span></span><br><span class="line">  <span class="attr">shake:</span> <span class="literal">true</span> <span class="comment">#  open shake (抖動特效)</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-type-animation.gif"></p>
<h3 id="背景特效"><a href="#背景特效" class="headerlink" title="背景特效"></a>背景特效</h3><div class="tabs" id="背景特效"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#背景特效-1">靜止綵帶</button></li><li class="tab"><button type="button" data-href="#背景特效-2">動態綵帶</button></li><li class="tab"><button type="button" data-href="#背景特效-3">canvas-nest</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="背景特效-1"><p>好看的綵帶背景，可設置每次刷新更換綵帶，或者每次點擊更換綵帶<br>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">size:</span> <span class="number">150</span></span><br><span class="line">  <span class="attr">alpha:</span> <span class="number">0.6</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span></span><br><span class="line">  <span class="attr">click_to_change:</span> <span class="literal">false</span>  <span class="comment">#設置是否每次點擊都更換綵帶</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手機端不顯示 true 手機端顯示</span></span><br></pre></td></tr></table></figure>
<p>相關配置可查看<a target="_blank" rel="noopener" href="https://github.com/hustcc/ribbon.js">canvas_ribbon</a></p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-canvas-ribbon.png"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="背景特效-2"><p>好看的綵帶背景，會飄動<br>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_fluttering_ribbon:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手機端不顯示 true 手機端顯示</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-canvas-ribbon-piao.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="背景特效-3"><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">canvas_nest:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">&#x27;0,0,255&#x27;</span> <span class="comment">#color of lines, default: &#x27;0,0,0&#x27;; RGB values: (R,G,B).(<span class="doctag">note:</span> use &#x27;,&#x27; to separate.)</span></span><br><span class="line">  <span class="attr">opacity:</span> <span class="number">0.7</span> <span class="comment"># the opacity of line (0~1), default: 0.5.</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">-1</span> <span class="comment"># z-index property of the background, default: -1.</span></span><br><span class="line">  <span class="attr">count:</span> <span class="number">99</span> <span class="comment"># the number of lines, default: 99.</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span> <span class="comment"># false 手機端不顯示 true 手機端顯示</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-canvas_nest.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h3 id="鼠標點擊效果"><a href="#鼠標點擊效果" class="headerlink" title="鼠標點擊效果"></a>鼠標點擊效果</h3><div class="tabs" id="鼠標點擊效果"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#鼠標點擊效果-1"><i class="fas fa-fire-alt"></i>煙花</button></li><li class="tab"><button type="button" data-href="#鼠標點擊效果-2"><i class="fas fa-heart"></i>愛心</button></li><li class="tab"><button type="button" data-href="#鼠標點擊效果-3"><i class="fab fa-amilia"></i>文字</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="鼠標點擊效果-1"><p><code>zIndex</code>建議只在<code>-1</code>和<code>9999</code>上選<br><code>-1</code> 代表煙火效果在底部<br><code>9999</code> 代表煙火效果在前面</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fireworks:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">zIndex:</span> <span class="number">9999</span> <span class="comment"># -1 or 9999</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-firewall.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="鼠標點擊效果-2"><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 點擊出現愛心</span></span><br><span class="line"><span class="attr">click_heart:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/click_love.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="鼠標點擊效果-3"><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 點擊出現文字，文字可自行修改</span></span><br><span class="line"><span class="attr">ClickShowText:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">text:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">I</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">LOVE</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">YOU</span></span><br><span class="line">  <span class="attr">fontSize:</span> <span class="string">15px</span></span><br><span class="line">  <span class="attr">random:</span> <span class="literal">false</span> <span class="comment"># 文字隨機顯示</span></span><br><span class="line">  <span class="attr">mobile:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/click_word.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h3 id="頁面美化"><a href="#頁面美化" class="headerlink" title="頁面美化"></a>頁面美化</h3><p>會改變ol、ul、h1-h5的樣式</p>
<p><code>field</code>配置生效的區域</p>
<ul>
<li><code>post</code> 只在文章頁生效</li>
<li><code>site</code> 在全站生效</li>
</ul>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 美化頁面顯示</span></span><br><span class="line"><span class="attr">beautify:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># site/post</span></span><br><span class="line">  <span class="attr">title-prefix-icon:</span> <span class="string">&#x27;\f0c1&#x27;</span></span><br><span class="line">  <span class="attr">title-prefix-icon-color:</span> <span class="string">&quot;#F47466&quot;</span></span><br></pre></td></tr></table></figure>
<p><code>title-prefix-icon</code>填寫的是fontawesome的icon的Unicode數。<br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-fontwesome-unicode.png"></p>
<blockquote>
<p>未開啟美化</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-post-beautify.png"></p>
<blockquote>
<p>開啟美化</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-post-beautif.png"></p>
<h3 id="自定義字體和字體大小"><a href="#自定義字體和字體大小" class="headerlink" title="自定義字體和字體大小"></a>自定義字體和字體大小</h3><h4 id="全局字體"><a href="#全局字體" class="headerlink" title="全局字體"></a>全局字體</h4><p>可自行設置字體的<code>font-family</code><br><strong>如不需要配置，請留空</strong></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Global font settings</span></span><br><span class="line"><span class="comment"># Don&#x27;t modify the following settings unless you know how they work (非必要不要修改)</span></span><br><span class="line"><span class="attr">font:</span></span><br><span class="line">  <span class="attr">global-font-size:</span></span><br><span class="line">  <span class="attr">code-font-size:</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">-apple-system,</span> <span class="string">BlinkMacSystemFont,</span> <span class="string">&quot;Segoe UI&quot;</span><span class="string">,</span> <span class="string">&quot;Helvetica Neue&quot;</span><span class="string">,</span> <span class="string">Lato,</span> <span class="string">Roboto,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br><span class="line">  <span class="attr">code-font-family:</span> <span class="string">consolas,</span> <span class="string">Menlo,</span> <span class="string">&quot;PingFang SC&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft JhengHei&quot;</span><span class="string">,</span> <span class="string">&quot;Microsoft YaHei&quot;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>
<h4 id="Blog-標題字體"><a href="#Blog-標題字體" class="headerlink" title="Blog 標題字體"></a>Blog 標題字體</h4><p>可自行設置字體的<code>font-family</code><br><strong>如不需要配置，請留空。</strong><br><strong>如不需要使用網絡字體，只需要把font_link留空就行</strong></p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Font settings for the site title and site subtitle</span></span><br><span class="line"><span class="comment"># 左上角網站名字 主頁居中網站名字</span></span><br><span class="line"><span class="attr">blog_title_font:</span></span><br><span class="line">  <span class="attr">font_link:</span> <span class="string">https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap</span></span><br><span class="line">  <span class="attr">font-family:</span> <span class="string">Titillium</span> <span class="string">Web,</span> <span class="string">&#x27;PingFang SC&#x27;</span><span class="string">,</span> <span class="string">&#x27;Hiragino Sans GB&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft JhengHei&#x27;</span><span class="string">,</span> <span class="string">&#x27;Microsoft YaHei&#x27;</span><span class="string">,</span> <span class="string">sans-serif</span></span><br></pre></td></tr></table></figure>
<h3 id="網站副標題"><a href="#網站副標題" class="headerlink" title="網站副標題"></a>網站副標題</h3><p>可設置主頁中顯示的網站副標題或者喜歡的座右銘。</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 主頁subtitle</span></span><br><span class="line"><span class="attr">subtitle:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 打字效果</span></span><br><span class="line">  <span class="attr">effect:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># 循環或者只打字一次</span></span><br><span class="line">  <span class="attr">loop:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># source調用第三方服務</span></span><br><span class="line">  <span class="comment"># source: false 關閉調用</span></span><br><span class="line">  <span class="comment"># source: 1  調用搏天api的隨機語錄（簡體） </span></span><br><span class="line">  <span class="comment"># source: 2  調用一言網的一句話（簡體） </span></span><br><span class="line">  <span class="comment"># source: 3  調用一句網（簡體） </span></span><br><span class="line">  <span class="comment"># source: 4  調用今日詩詞（簡體</span></span><br><span class="line">  <span class="comment"># subtitle 會先顯示 source , 再顯示 sub 的內容</span></span><br><span class="line">  <span class="attr">source:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># 如果有英文逗號&#x27; , &#x27;,請使用轉義字元 &amp;#44;</span></span><br><span class="line">  <span class="comment"># 如果有英文雙引號&#x27; &quot; &#x27;,請使用轉義字元 &amp;quot;</span></span><br><span class="line">  <span class="comment"># 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住</span></span><br><span class="line">  <span class="comment"># 例如 ”&amp;quotNever put off till tomorrow what you can do today&amp;quot&quot;</span></span><br><span class="line">  <span class="comment"># 如果關閉打字效果，subtitle只會顯示sub的第一行文字</span></span><br><span class="line">  <span class="attr">sub:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">今日事&amp;#44;今日畢</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">Never</span> <span class="string">put</span> <span class="string">off</span> <span class="string">till</span> <span class="string">tomorrow</span> <span class="string">what</span> <span class="string">you</span> <span class="string">can</span> <span class="string">do</span> <span class="string">today</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-index-subtitle.gif"></p>
<h3 id="主頁top-img顯示大小"><a href="#主頁top-img顯示大小" class="headerlink" title="主頁top_img顯示大小"></a>主頁top_img顯示大小</h3><blockquote>
<p>適用於 版本號 &gt;= V1.2.0</p>
</blockquote>
<p>默認的顯示為全屏。site-info的區域會居中顯示</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 主頁設置</span></span><br><span class="line"><span class="comment"># 默認top_img全屏，site_info在中間</span></span><br><span class="line"><span class="comment"># 使用默認, 都無需填寫（建議默認）</span></span><br><span class="line"><span class="attr">index_site_info_top:</span> <span class="comment"># 主頁標題距離頂部距離  例如 300px/300em/300rem/10%</span></span><br><span class="line"><span class="attr">index_top_img_height:</span>  <span class="comment">#主頁top_img高度 例如 300px/300em/300rem  不能使用百分比</span></span><br></pre></td></tr></table></figure>
<p>注意：<code>index_top_img_height</code>的值不能使用百分比。<br>2個都不填的話，會使用默認值</p>
<p>舉例，當</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">index_top_img_height:</span> <span class="string">400px</span></span><br></pre></td></tr></table></figure>
<p>效果</p>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-index-top-img-setting.png"></p>
<h3 id="頁面加載動畫preloader"><a href="#頁面加載動畫preloader" class="headerlink" title="頁面加載動畫preloader"></a>頁面加載動畫preloader</h3><p>當進入網頁時，因為加載速度的問題，可能會導致top_img圖片出現斷層顯示，或者網頁加載不全而出現等待時間，開啟preloader後，會顯示加載動畫，等頁面加載完，加載動畫會消失。</p>
<p>配置<code>butterly.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 加載動畫 Loading Animation</span></span><br><span class="line"><span class="attr">preloader:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-preloader.gif"></p>
<h2 id="PWA"><a href="#PWA" class="headerlink" title="PWA"></a>PWA</h2><p>要為<code>Butterfly</code>配上 PWA 特性, 你需要如下幾個步驟:</p>
<ol>
<li><p>打開 hexo 工作目錄</p>
</li>
<li><p><code>npm install hexo-offline --save</code> 或者 <code>yarn add hexo-offline</code></p>
</li>
<li><p>在根目錄創建 <code>hexo-offline.config.cjs</code> 文件，並增加以下內容。</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// offline config passed to workbox-build.</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  globPatterns: [<span class="string">&#x27;**/*.&#123;js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2&#125;&#x27;</span>],</span><br><span class="line">  <span class="comment">// 靜態文件合集，如果你的站點使用了例如 webp 格式的文件，請將文件類型添加進去。</span></span><br><span class="line">  globDirectory: <span class="string">&#x27;public&#x27;</span>,</span><br><span class="line">  swDest: <span class="string">&#x27;public/service-worker.js&#x27;</span>,</span><br><span class="line">  maximumFileSizeToCacheInBytes: <span class="number">10485760</span>, <span class="comment">// 緩存的最大文件大小，以字節為單位。</span></span><br><span class="line">  skipWaiting: <span class="literal">true</span>,</span><br><span class="line">  clientsClaim: <span class="literal">true</span>,</span><br><span class="line">  runtimeCaching: [ <span class="comment">// 如果你需要加載 CDN 資源，請配置該選項，如果沒有，可以不配置。</span></span><br><span class="line">    <span class="comment">// CDNs - should be CacheFirst, since they should be used specific versions so should not change</span></span><br><span class="line">    &#123;</span><br><span class="line">      urlPattern: <span class="regexp">/^https:\/\/cdn\.example\.com\/.*/</span>, <span class="comment">// 可替換成你的 URL</span></span><br><span class="line">      handler: <span class="string">&#x27;CacheFirst&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>更多內容請查看 <a target="_blank" rel="noopener" href="https://github.com/JLHwung/hexo-offline">hexo-offline</a>的官方文檔</p>
<ol start="4">
<li>在<code>主題配置文件</code>中開啟 pwa 選項。</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">pwa:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">manifest:</span> <span class="string">/img/pwa/manifest.json</span></span><br><span class="line">  <span class="attr">apple_touch_icon:</span> <span class="string">/img/pwa/apple-touch-icon.png</span></span><br><span class="line">  <span class="attr">favicon_32_32:</span> <span class="string">/img/pwa/32.png</span></span><br><span class="line">  <span class="attr">favicon_16_16:</span> <span class="string">/img/pwa/16.png</span></span><br><span class="line">  <span class="attr">mask_icon:</span> <span class="string">/img/pwa/safari-pinned-tab.svg</span></span><br></pre></td></tr></table></figure>
<ol start="5">
<li>在創建<code>source/</code>目錄中創建<code>manifest.json</code>文件。</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;string&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;short_name&quot;</span>: <span class="string">&quot;Junzhou&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;theme_color&quot;</span>: <span class="string">&quot;#49b1f5&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;background_color&quot;</span>: <span class="string">&quot;#49b1f5&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;display&quot;</span>: <span class="string">&quot;standalone&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;scope&quot;</span>: <span class="string">&quot;/&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;start_url&quot;</span>: <span class="string">&quot;/&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;icons&quot;</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/36.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;36x36&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/48.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;48x48&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/72.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;72x72&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/96.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;96x96&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/144.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;144x144&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/192.png&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;192x192&quot;</span>,</span><br><span class="line">          <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">&quot;src&quot;</span>: <span class="string">&quot;images/pwaicons/512.png&quot;</span>,</span><br><span class="line">            <span class="attr">&quot;sizes&quot;</span>: <span class="string">&quot;512x512&quot;</span>,</span><br><span class="line">            <span class="attr">&quot;type&quot;</span>: <span class="string">&quot;image/png&quot;</span></span><br><span class="line">          &#125;</span><br><span class="line">      ],</span><br><span class="line">      <span class="attr">&quot;splash_pages&quot;</span>: <span class="literal">null</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>你也可以通過 <a target="_blank" rel="noopener" href="https://app-manifest.firebaseapp.com/">Web App Manifest</a>快速創建<code>manifest.json</code>。（Web App Manifest 要求至少包含一個 512*512 像素的圖標）</p>
<ol start="6">
<li><p>可以通過<code>Chrome</code>插件<code>Lighthouse</code>檢查 PWA 配置是否生效以及配置是否正確。</p>
<ul>
<li>打開博客頁面</li>
<li>啟動<code>Lighthouse</code>插件 (<code>Lighthouse</code>插件要求至少包含一個 512*512 像素的圖標)</li>
</ul>
</li>
</ol>
<p>關於 PWA（漸進式增強 Web 應用）的更多內容請參閲 <a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/lighthouse/audits/address-bar">Google Tools for Web Developers</a></p>
<h2 id="字數統計"><a href="#字數統計" class="headerlink" title="字數統計"></a>字數統計</h2><p>要為<code>Butterfly</code>配上字數統計特性, 你需要如下幾個步驟:</p>
<ol>
<li><p>打開 hexo 工作目錄</p>
</li>
<li><p><code>npm install hexo-wordcount --save</code> or <code>yarn add hexo-wordcount</code></p>
</li>
<li><p>修改 <code>主題配置文件</code>:</p>
</li>
</ol>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">wordcount:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">post_wordcount:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">min2read:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">total_wordcount:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-doc-word-count.png"><br><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/hexo-theme-butterfly-docs-wordcount-totalcount.png"></p>
<h2 id="圖片大圖查看模式"><a href="#圖片大圖查看模式" class="headerlink" title="圖片大圖查看模式"></a>圖片大圖查看模式</h2><div class="note info flat"><p>只能開啟一個</p>
</div>



<div class="tabs" id="圖片大圖查看模式"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#圖片大圖查看模式-1">fancybox</button></li><li class="tab"><button type="button" data-href="#圖片大圖查看模式-2">medium_zoom</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="圖片大圖查看模式-1"><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># fancybox http://fancyapps.com/fancybox/3/</span></span><br><span class="line"><span class="attr">fancybox:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/fancybox.gif" alt="fancybox.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="圖片大圖查看模式-2"><p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">medium_zoom:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/medium_zoom.gif" alt="medium_zoom.gif"></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>

<h2 id="Snackbar-彈窗"><a href="#Snackbar-彈窗" class="headerlink" title="Snackbar 彈窗"></a>Snackbar 彈窗</h2><p>Snackbar 彈窗,根據自己愛好開啟</p>
<p>修改 <code>主題配置文件</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Snackbar 彈窗</span></span><br><span class="line"><span class="comment"># https://github.com/polonel/SnackBar</span></span><br><span class="line"><span class="comment"># position 彈窗位置</span></span><br><span class="line"><span class="comment"># 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right</span></span><br><span class="line"><span class="attr">snackbar:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">bottom-left</span></span><br><span class="line">  <span class="attr">bg_light:</span> <span class="string">&#x27;#49b1f5&#x27;</span> <span class="comment">#light mode時彈窗背景</span></span><br><span class="line">  <span class="attr">bg_dark:</span> <span class="string">&#x27;#2d3035&#x27;</span> <span class="comment">#dark mode時彈窗背景</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>未開啟Snackbar</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/snackbar_false.gif" alt="snackbar_false.gif"></p>
<blockquote>
<p>開啟Snackbar</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/snackbar_true.gif" alt="snackbar_true.gif"></p>
<h2 id="其它配置"><a href="#其它配置" class="headerlink" title="其它配置"></a>其它配置</h2><h3 id="CSS-前綴"><a href="#CSS-前綴" class="headerlink" title="CSS 前綴"></a>CSS 前綴</h3><p>有些 CSS 並不是所有瀏覽器都支持，需要增加對應的前綴才會生效。</p>
<p>開啟  <code>css_prefix</code> 後，會自動為一些 CSS 增加前綴。（會增加 20%的體積）</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Add the vendor prefixes to ensure compatibility</span></span><br><span class="line"><span class="attr">css_prefix:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="Open-Graph"><a href="#Open-Graph" class="headerlink" title="Open Graph"></a>Open Graph</h3><p>在 <code>head</code> 裏增加一些 meta 資料，例如縮略圖、標題、時間等等。當你分享網頁到一些平台時，平台會讀取 Open Graph 的內容，展示縮略圖，標題等等信息。</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Open graph meta tags</span></span><br><span class="line"><span class="comment"># https://developers.facebook.com/docs/sharing/webmasters/</span></span><br><span class="line"><span class="attr">Open_Graph_meta:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="Instantpage"><a href="#Instantpage" class="headerlink" title="Instantpage"></a>Instantpage</h3><p>當鼠標懸停到鏈接上超過 65 毫秒時，Instantpage 會對該鏈接進行預加載，可以提升訪問速度。</p>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://instant.page/</span></span><br><span class="line"><span class="comment"># prefetch (預加載)</span></span><br><span class="line"><span class="attr">instantpage:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<h3 id="Pangu"><a href="#Pangu" class="headerlink" title="Pangu"></a>Pangu</h3><blockquote>
<p>如果你跟我一樣，每次看到網頁上的中文字和英文、數字、符號擠在一塊，就會坐立難安，忍不住想在它們之間加個空格。這個外掛正是你在網路世界走跳所需要的東西，它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。</p>
</blockquote>
<p>修改配置文件</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># https://github.com/vinta/pangu.js</span></span><br><span class="line"><span class="comment"># Insert a space between Chinese character and English character (中英文之間添加空格)</span></span><br><span class="line"><span class="attr">pangu:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span> <span class="comment"># site/post</span></span><br></pre></td></tr></table></figure>
<p><code>field</code>只支持兩個參數，<code>post</code>(只在文章頁生效)和<code>site</code>(全站生效)</p>
<h2 id="Pjax"><a href="#Pjax" class="headerlink" title="Pjax"></a>Pjax</h2><p>當用户點擊鏈接，通過ajax更新頁面需要變化的部分，然後使用HTML5的pushState修改瀏覽器的URL地址。</p>
<p>這樣可以不用重複加載相同的資源（css/js）， 從而提升網頁的加載速度。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Pjax [Beta]</span></span><br><span class="line"><span class="comment"># It may contain bugs and unstable, give feedback when you find the bugs.</span></span><br><span class="line"><span class="comment"># https://github.com/MoOx/pjax</span></span><br><span class="line"><span class="attr">pjax:</span> </span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">/music/</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">/no-pjax/</span></span><br></pre></td></tr></table></figure>
<div class="note info flat"><p>對於一些第三方插件，有些並不支持 pjax 。<br>你可以把<strong>網頁</strong>加入到 <code>exclude</code> 裏，這個網頁會被 pjax 排除在外。<br>點擊該網頁會重新加載網站</p>
<p>使用pjax後，一些自己DIY的js可能會無效，跳轉頁面時需要重新調用，請參考<a target="_blank" rel="noopener" href="https://github.com/MoOx/pjax">Pjax文檔</a><br>使用pjax後，一些個別頁面加載的js/css，將會改為所有頁面都加載</p>
</div>

<div class="note warning flat"><p>Butterfly的Pjax目前仍有一些問題，請留意</p>
<ul>
<li>使用谷歌廣告可能會報錯（例如自動廣告）</li>
</ul>
<p>如果你在使用中發現問題，歡迎反饋Bugs</p>
</div>

<h2 id="Inject"><a href="#Inject" class="headerlink" title="Inject"></a>Inject</h2><blockquote>
<p>2.3.0以上支持</p>
</blockquote>
<p>如想添加額外的js/css/meta等等東西，可以在Inject裏添加，支持添加到head(<code>&lt;/body&gt;</code>標籤之前)和bottom(<code>&lt;/html&gt;</code>標籤之前)。</p>
<p>請注意：以標準的html格式添加內容</p>
<p>例如</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">inject:</span></span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">  	<span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;/self.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">  	<span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;xxxx&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>
<p><em>留意:</em> 如果你的網站根目錄不是’/‘,使用本地圖片時，需加上你的根目錄。<br>例如：網站是 <code>https://yoursite.com/blog</code>,引用<code>css/xx.css</code>，則設置為<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/blog/css/xx.css&quot;&gt;</code></p>
<h2 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h2><p>配置文件中最後一部分CDN，裏面是主題所引用到的文件，可自行配置CDN。（非必要請勿修改，配置後請確認鏈接是否能訪問）</p>
<p>以下是一些CDN提供商：</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://www.jsdelivr.com/">jsdelivr</a>   👍主題使用</li>
<li><a target="_blank" rel="noopener" href="https://www.bootcdn.cn/">bootcdn</a></li>
<li><a target="_blank" rel="noopener" href="https://cdnjs.com/">cdnjs</a></li>
<li>……</li>
</ul>
<a class="btn-beautify button--animated block green right larger" href="/posts/98d20436/" 
  title="❓ Butterfly 安裝文檔(五) 主題問答"><i class="far fa-hand-point-right"></i><span>❓ Butterfly 安裝文檔(五) 主題問答</span></a>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">娄豪杰</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/article/ceeb73f.html">http://example.com/article/ceeb73f.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">HJ BLOG</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E6%95%99%E7%A8%8B/">教程</a><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/tags/%E4%B8%BB%E9%A1%8C/">主題</a><a class="post-meta__tags" href="/tags/butterfly/">butterfly</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-04-cover.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/article/98d20436.html"><img class="prev-cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-doc-05-cover.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Butterfly 安裝文檔(五) 主題問答</div></div></a></div><div class="next-post pull-right"><a href="/article/4aa8abbe.html"><img class="next-cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-docs-03-cover.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Butterfly 安裝文檔(三) 主題配置-1</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/article/21cfbf15.html" title="Butterfly 安裝文檔(一) 快速開始"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-docs-01-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-01</div><div class="title">Butterfly 安裝文檔(一) 快速開始</div></div></a></div><div><a href="/article/dc584b87.html" title="Butterfly 安裝文檔(二) 主題頁面"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-02-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-02</div><div class="title">Butterfly 安裝文檔(二) 主題頁面</div></div></a></div><div><a href="/article/98d20436.html" title="Butterfly 安裝文檔(五) 主題問答"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-doc-05-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-05</div><div class="title">Butterfly 安裝文檔(五) 主題問答</div></div></a></div><div><a href="/article/4073eda.html" title="Butterfly 安裝文檔(六) 進階教程"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-docs-06-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-06</div><div class="title">Butterfly 安裝文檔(六) 進階教程</div></div></a></div><div><a href="/article/4aa8abbe.html" title="Butterfly 安裝文檔(三) 主題配置-1"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/butterfly-docs-03-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-03</div><div class="title">Butterfly 安裝文檔(三) 主題配置-1</div></div></a></div><div><a href="/article/198a4240.html" title="Butterfly 安裝文檔(七) 更新日誌"><img class="cover" src="https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-07-cover.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-07</div><div class="title">Butterfly 安裝文檔(七) 更新日誌</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">娄豪杰</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">70</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/louhaojie99"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">人生就像品茗，懂得吃苦，才能回甘啊。</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A9%95%E8%AB%96"><span class="toc-number">1.</span> <span class="toc-text">評論</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8%E7%B6%AB%E8%81%8A%E5%A4%A9"><span class="toc-number">2.</span> <span class="toc-text">在綫聊天</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E4%BA%AB"><span class="toc-number">3.</span> <span class="toc-text">分享</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%9C%E7%B4%A2%E7%B3%BB%E7%B5%B1"><span class="toc-number">4.</span> <span class="toc-text">搜索系統</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E9%A9%97%E8%AD%89"><span class="toc-number">5.</span> <span class="toc-text">網站驗證</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E6%9E%90%E7%B5%B1%E8%A8%88"><span class="toc-number">6.</span> <span class="toc-text">分析統計</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BB%A3%E5%91%8A"><span class="toc-number">7.</span> <span class="toc-text">廣告</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Math-%E6%95%B8%E5%AD%B8"><span class="toc-number">8.</span> <span class="toc-text">Math 數學</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BE%8E%E5%8C%96-%E7%89%B9%E6%95%88"><span class="toc-number">9.</span> <span class="toc-text">美化&#x2F;特效</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E7%BE%A9%E4%B8%BB%E9%A1%8C%E8%89%B2"><span class="toc-number">9.1.</span> <span class="toc-text">自定義主題色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E8%83%8C%E6%99%AF"><span class="toc-number">9.2.</span> <span class="toc-text">網站背景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#footer-%E8%83%8C%E6%99%AF"><span class="toc-number">9.3.</span> <span class="toc-text">footer 背景</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C"><span class="toc-number">9.4.</span> <span class="toc-text">打字效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%89%B9%E6%95%88"><span class="toc-number">9.5.</span> <span class="toc-text">背景特效</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A8%99%E9%BB%9E%E6%93%8A%E6%95%88%E6%9E%9C"><span class="toc-number">9.6.</span> <span class="toc-text">鼠標點擊效果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2%E7%BE%8E%E5%8C%96"><span class="toc-number">9.7.</span> <span class="toc-text">頁面美化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E7%BE%A9%E5%AD%97%E9%AB%94%E5%92%8C%E5%AD%97%E9%AB%94%E5%A4%A7%E5%B0%8F"><span class="toc-number">9.8.</span> <span class="toc-text">自定義字體和字體大小</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%AD%97%E9%AB%94"><span class="toc-number">9.8.1.</span> <span class="toc-text">全局字體</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Blog-%E6%A8%99%E9%A1%8C%E5%AD%97%E9%AB%94"><span class="toc-number">9.8.2.</span> <span class="toc-text">Blog 標題字體</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B6%B2%E7%AB%99%E5%89%AF%E6%A8%99%E9%A1%8C"><span class="toc-number">9.9.</span> <span class="toc-text">網站副標題</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A0%81top-img%E9%A1%AF%E7%A4%BA%E5%A4%A7%E5%B0%8F"><span class="toc-number">9.10.</span> <span class="toc-text">主頁top_img顯示大小</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A0%81%E9%9D%A2%E5%8A%A0%E8%BC%89%E5%8B%95%E7%95%ABpreloader"><span class="toc-number">9.11.</span> <span class="toc-text">頁面加載動畫preloader</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#PWA"><span class="toc-number">10.</span> <span class="toc-text">PWA</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E6%95%B8%E7%B5%B1%E8%A8%88"><span class="toc-number">11.</span> <span class="toc-text">字數統計</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%96%E7%89%87%E5%A4%A7%E5%9C%96%E6%9F%A5%E7%9C%8B%E6%A8%A1%E5%BC%8F"><span class="toc-number">12.</span> <span class="toc-text">圖片大圖查看模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Snackbar-%E5%BD%88%E7%AA%97"><span class="toc-number">13.</span> <span class="toc-text">Snackbar 彈窗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E5%AE%83%E9%85%8D%E7%BD%AE"><span class="toc-number">14.</span> <span class="toc-text">其它配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-%E5%89%8D%E7%B6%B4"><span class="toc-number">14.1.</span> <span class="toc-text">CSS 前綴</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Open-Graph"><span class="toc-number">14.2.</span> <span class="toc-text">Open Graph</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Instantpage"><span class="toc-number">14.3.</span> <span class="toc-text">Instantpage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Pangu"><span class="toc-number">14.4.</span> <span class="toc-text">Pangu</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Pjax"><span class="toc-number">15.</span> <span class="toc-text">Pjax</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Inject"><span class="toc-number">16.</span> <span class="toc-text">Inject</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CDN"><span class="toc-number">17.</span> <span class="toc-text">CDN</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/article/cc11b2b0.html" title="二、JavaScript设计模式【下】"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/983a2ddf4c01d0f319b391469f669eba7a1a82ba077da903e3114d4062c26cdea809b197d9cf02bb077af6272de8e1ed?pictype=scale&amp;from=30113&amp;version=3.3.3.3&amp;uin=851681631&amp;fname=12_js.jpg&amp;size=750" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="二、JavaScript设计模式【下】"/></a><div class="content"><a class="title" href="/article/cc11b2b0.html" title="二、JavaScript设计模式【下】">二、JavaScript设计模式【下】</a><time datetime="2021-09-11T16:00:00.000Z" title="发表于 2021-09-12 00:00:00">2021-09-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/cc00b2b0.html" title="一、JavaScript设计模式【上】"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/983a2ddf4c01d0f319b391469f669eba7a1a82ba077da903e3114d4062c26cdea809b197d9cf02bb077af6272de8e1ed?pictype=scale&amp;from=30113&amp;version=3.3.3.3&amp;uin=851681631&amp;fname=12_js.jpg&amp;size=750" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="一、JavaScript设计模式【上】"/></a><div class="content"><a class="title" href="/article/cc00b2b0.html" title="一、JavaScript设计模式【上】">一、JavaScript设计模式【上】</a><time datetime="2021-09-10T16:00:00.000Z" title="发表于 2021-09-11 00:00:00">2021-09-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code10.html" title="十、Vue源码【内置组件篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="十、Vue源码【内置组件篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code10.html" title="十、Vue源码【内置组件篇】">十、Vue源码【内置组件篇】</a><time datetime="2021-09-09T16:00:00.000Z" title="发表于 2021-09-10 00:00:00">2021-09-10</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code9.html" title="九、Vue源码【指令篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="九、Vue源码【指令篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code9.html" title="九、Vue源码【指令篇】">九、Vue源码【指令篇】</a><time datetime="2021-09-08T16:00:00.000Z" title="发表于 2021-09-09 00:00:00">2021-09-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/article/vue-sound-code8.html" title="八、Vue源码【过滤器篇】"><img src="https://img2.baidu.com/it/u=4067570870,2963075030&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=640&amp;h=360" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="八、Vue源码【过滤器篇】"/></a><div class="content"><a class="title" href="/article/vue-sound-code8.html" title="八、Vue源码【过滤器篇】">八、Vue源码【过滤器篇】</a><time datetime="2021-09-07T16:00:00.000Z" title="发表于 2021-09-08 00:00:00">2021-09-08</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://cdn.jsdelivr.net/gh/jerryc127/CDN/img/Butterfly-docs-04-cover.png')"><div id="footer-wrap"><div class="copyright">&copy;2017 - 2022 By 娄豪杰</div><div class="footer_custom_text"><div>嗨，欢迎来到我的博客，希望能帮助到您！</div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js" data-mobile="false" data-text="富强,民主,文明,和谐,自由,平等,公正,法治" data-fontsize="15px" data-random="true" async="async"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"]):not([href="/music/"]):not([href="/no-pjax/"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener toc scroll 
  window.removeEventListener('scroll', window.tocScrollFn)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>